<template>
    <view>
        <u-sticky>
            <view class="lt-header">
                <view class="header-item" @click="onClickWorkshop">
                    <view class="item-gap">{{ searchParams.workshopName || '暂无车间' }}</view>
                    <u-icon name="arrow-down" size="16" color="#fff"></u-icon>
                </view>
                <view class="header-item" @click="onClickMachine">
                    <view class="item-gap">{{ searchParams.machineNameOrCode || '全部机台' }}</view>
                    <u-icon name="arrow-down" size="16" color="#fff"></u-icon>
                </view>
            </view>
        </u-sticky>
        <view class="operation-container">
            <view>
                <u-tag :text="`机台数：${tableData.length}`" plain size="medium" type="primary"></u-tag>
            </view>
            <view @click="onEditBtn">
                <u-icon name="list-dot" size="24"></u-icon>
            </view>
        </view>
        <view class="lt-container">
            <view v-show="!tableData.length" class="text-center font-size-14">暂无数据</view>
            <view
                v-for="(machineItem, machineIndex) in tableData"
                :key="machineIndex"
                class="machine-item"
            >
                <view class="machine-item-label">{{ machineItem.machineName }}</view>
                <view class="machine-item-groups">
                    <view
                        v-for="(spinItem, spinIndex) in machineItem.spinGroupList"
                        :key="spinIndex"
                        class="spin-item"
                    >
                        <view class="spin-item-inner">
                            <view class="spin-item-header">{{ `${spinItem.startSpinNumber}~${spinItem.endSpinNumber}` }}</view>
                            <view v-if="isEdit" class="spin-item-content" @click.native="onSelectMachineAndSpinItem(machineItem, spinItem)">
                                <u-icon name="edit-pen" color="#2b85e4" size="22"></u-icon>
                            </view>
                            <view v-else class="spin-item-content" @click="onDeleteSpinGroupItem(machineItem, spinItem)">
                                <u-icon name="trash" color="#ed4014" size="22"></u-icon>
                            </view>
                        </view>
                    </view>
                    <view class="spin-item">
                        <view class="spin-item-inner" style="background: #fff;" @click="onSelectMachineAndSpinItem(machineItem, {})">
                            <u-icon name="plus" size="22" color="#2b85e4"></u-icon>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <edit-machine-spin-group-item-modal
            :form-data="selectMachineItem"
            :modalState="selectSetGroupModalState"
            @confirm="onConfirmOfSetSpinGroupModalState"
            @on-visible-change="onVisibleChangeOfSetSpinGroupModalState"
        ></edit-machine-spin-group-item-modal>
        <jk-popup :show="showSelectMachinePopup" :closeOnClickOverlay="true" title="选择机台" @close="onSelectMachinePopup">
            <u-radio-group v-model="selectMachineVal" size="21" iconPlacement="right" placement="column" :borderBottom="true">
                <view style="max-height: 400px;overflow: auto;">
                    <u-radio
                        v-for="item in machineList"
                        :key="item.id"
                        labelSize="18"
                        iconSize="24"
                        size="24"
                        labelColor="#17233d"
                        :borderBottom="true"
                        :customStyle="{
                            margin: '8rpx',
                            height: '42px'
                        }"
                        :label="item.code"
                        :name="item.id"
                        style="margin: 10rpx;"
                    ></u-radio>
                </view>
                <u-button @click="onConfirmSelectMachineBtn" type="primary" size="large">确认</u-button>
            </u-radio-group>
        </jk-popup>
    </view>
</template>

<script>
    import {
        machineManagerMachineSpinGroupDelete,
        productionPrdNoticeLtMachineChangeGetMachineList,
        systemAuthGetPermissionInfo
    } from "../../../../api";
        import editMachineSpinGroupItemModal from './components/edit-machine-spin-group-item-modal';
    import {showLoading, tipBar} from "../../../../utils/jk-utils";
    import jkPopup from "../../../../jk-components/jk-popup";
    export default {
        components: {
            editMachineSpinGroupItemModal,
            jkPopup
        },
        data() {
            return {
                selectMachineVal: null,
                showSelectMachinePopup: false,
                selectSetGroupModalState: false,
                selectProduct: null,
                searchParams: {
                    workshopId: null,
                    machineNameOrCode: ""
                },
                workshopList: [],
                machineList: [
                    { id: '-1', code: '全部机台' },
                    { id: 'LT001', code: 'LT001' },
                    { id: 'LT002', code: 'LT002' },
                    { id: 'LT003', code: 'LT003' },
                    { id: 'LT004', code: 'LT004' },
                    { id: 'LT005', code: 'LT005' },
                    { id: 'LT006', code: 'LT006' },
                ],
                isEdit: true,
                tableData: [],
                selectMachineItem: {},
                productTaskItem: {},
                ruleForm: {}
            };
        },
        methods: {
            onConfirmSelectMachineBtn() {
                this.$set(this.searchParams, 'machineNameOrCode', this.selectMachineVal === '-1' ? '' : this.selectMachineVal);
                this.showSelectMachinePopup = false;
                this.getListRequest();
            },
            onSelectMachinePopup() {
                this.selectMachineVal = null;
                this.showSelectMachinePopup = false;
            },
            onEditBtn() {
                this.isEdit = !this.isEdit;
                if (!this.isEdit) {
                    uni.showToast({
                        title: '删除模式',
                        icon: 'success'
                    });
                }
            },
            onBackBtn() {
                uni.switchTab({
                    url: '/pages/index/index'
                });
            },
            onConfirmOfSetSpinGroupModalState(e) {
                this.selectSetGroupModalState = false;
                this.getListRequest();
            },
            onVisibleChangeOfSetSpinGroupModalState(e) {
                this.selectSetGroupModalState = e;
            },
            onSelectMachineAndSpinItem(machineItem, spinItem) {
                this.selectMachineItem = {
                    machineId: machineItem.machineId,
                    machineCode: machineItem.machineCode,
                    machineName: machineItem.machineName,
                    id: spinItem.id,
                    sortNum: spinItem.sortNum || machineItem.spinGroupList.length + 1,
                    startSpinNumber: spinItem.startSpinNumber || machineItem.spinGroupList[machineItem.spinGroupList.length - 1].endSpinNumber + 1,
                    endSpinNumber: spinItem.endSpinNumber,
                };
                this.selectSetGroupModalState = true;
            },
            onDeleteSpinGroupItem(machineItem, spinItem) {
                let _this = this;
                uni.showModal({
                    title: '提示',
                    icon: 'error',
                    content: `确定移除"${machineItem.machineCode}的"${spinItem.startSpinNumber}~${spinItem.endSpinNumber}"吗?`,
                    success(res) {
                        if (res.confirm) {
                            machineManagerMachineSpinGroupDelete({}, {
                                id: spinItem.id
                            }).then(res => {
                                if (res.data.status === 200) {
                                    tipBar('save');
                                    _this.getListRequest();
                                }
                            });

                        }
                    }
                });
            },
            onClickMachine() {
                this.showSelectMachinePopup = true;
            },
            onClickWorkshop() {
                let _this = this;
                uni.showActionSheet({
                    itemList: _this.workshopList.map(x => x.workshopName),
                    success(res) {
                        _this.$set(_this.searchParams, 'workshopId', _this.workshopList[res.tapIndex].workshopId);
                        _this.$set(_this.searchParams, 'workshopName', _this.workshopList[res.tapIndex].workshopName);
                        _this.getListRequest();
                    }
                });
            },
            formatData(x) {
                return  {
                    id: x.id,
                    sortNum: x.sortNum,
                    startSpinNumber: x.startSpinNumber,
                    endSpinNumber: x.endSpinNumber,
                    productTaskList: x.productTaskList
                }
            },
            groupByMachine(data) {
                let arr = [];
                let item = {};
                data.forEach(x => {
                    if (!item[x.machineCode]) {
                        item[x.machineCode] = x.machineCode;
                        arr.push({
                            machineId: x.machineId,
                            machineCode: x.machineCode,
                            machineName: x.machineName,
                            spinGroupList: [this.formatData(x)]

                        });
                    } else {
                        arr.forEach(k => {
                            if (k.machineCode === x.machineCode) {
                                k.spinGroupList.push(this.formatData(x))
                            }
                        })
                    }
                })
                this.tableData = JSON.parse(JSON.stringify(arr));
            },
            getListRequest() {
                if (!this.searchParams.workshopId) return false;
                showLoading(true);
                return productionPrdNoticeLtMachineChangeGetMachineList(this.searchParams).then(res => {
                    showLoading(false);
                    if (res.data.status === 200) {
                        this.groupByMachine(res.data.res || []);
                    }
                })
            },
            getWorkshopDataRequest() {
                return systemAuthGetPermissionInfo().then(res => {
                    if (res.data.status === 200) {
                        if (!this.searchParams.workshopId) {
                            this.$set(this.searchParams, 'workshopId', res.data.res.workshop.defaultWorkshopId);
                            this.$set(this.searchParams, 'workshopCode', res.data.res.workshop.defaultWorkshopCode);
                            this.$set(this.searchParams, 'workshopName', res.data.res.workshop.defaultWorkshopName);
                        }
                        this.workshopList = res.data.res.workshop.workshops;
                    }
                })
            },
            async getDependentData() {
                showLoading(true);
                await this.getWorkshopDataRequest();
                await this.getListRequest();
                showLoading(false);
            }
        },
        onShow() {
            this.getDependentData();
        }
    }
</script>
<style scoped lang="scss">
    @import "./list";
</style>
